<template>
  <footer class="footer">
    <div class="footer-container">
      <div class="left">
        <div class="footer-section">
          <h4>网站地图</h4>
          <ul>
            <li>比分直播</li>
            <li>足球比分</li>
            <li>欧洲杯赛程</li>
            <li>篮球比分</li>
            <li>篮球直播</li>
            <li>NBA赛程</li>
            <li>CBA赛程</li>
            <li>欧冠杯</li>
            <li>英超排名</li>
            <li>德甲排名</li>
            <li>西甲排名</li>
            <li>意甲排名</li>
            <li>中超排名</li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>友情链接</h4>
          <ul>
            <li>高清直播</li>
            <li>赛事预告</li>
            <li>足球比分</li>
            <li>篮球比分</li>
            <li>体育资讯</li>
            <li>体育社区</li>
          </ul>
        </div>
      </div>

      <div>
        <div class="footer-section">
          <h4>主播帮助</h4>
          <ul>
            <li>主播开播教程</li>
            <li>懂体育直播规范</li>
            <li>懂体育直播协议</li>
            <li>直播工具下载</li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>联系我们</h4>
          <ul>
            <li>申请主播QQ: 2943464188</li>
            <li>问题反馈QQ: 2943464188</li>
            <li>客服邮箱: 2943464188@qq.com</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="footer-info">
        <span>桂ICP备19009876号</span>
        <span>桂网文（2019）5333-055号</span>
        <span>增值电信业务经营许可证:桂B2-20200107</span>
        <span>Copyright © 2019-2024 球球网. ALL Rights Reserved</span>
      </div>
      <div class="footer-icons">
        <!-- <img src="path/to/icon1.png" alt="icon1" />
        <img src="path/to/icon2.png" alt="icon2" />
        <img src="path/to/icon3.png" alt="icon3" />
        <img src="path/to/icon4.png" alt="icon4" />
        <img src="path/to/icon5.png" alt="icon5" /> -->
      </div>
    </div>
  </footer>
</template>

<style scoped lang="scss">
.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
  font-size: 14px;
  .footer-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    width: 1400px;
    margin: 0 auto;
    .left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .footer-section {
      h4 {
        margin-bottom: 10px;
        font-size: 16px;
      }

      ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;

        li {
          margin-bottom: 5px;
          margin-right: 10px;
        }
      }
    }
  }

  .footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #555;

    .footer-info {
      span {
        margin-right: 15px;
      }
    }

    .footer-icons {
      img {
        margin-right: 10px;
      }
    }
  }
}
</style>
